<script lang="ts" setup>
import { menutreeItemEmits, menutreeItemProps } from './menutree-item';
import Common from '@/utils';
defineOptions({ name: 'WindowsMenutreeItem' });
defineProps(menutreeItemProps);
const emits = defineEmits(menutreeItemEmits);
const handleAppClick = (node: any) => {
  emits('app-click', node);
};
</script>
<template>
  <!-- 没有子节点，使用 el-menu-item 渲染 -->
  <el-menu-item v-if="!item[menuOptions.children] || !item[menuOptions.children].length" :index="item[menuOptions.code]" @click="handleAppClick(item)">
    <!-- <el-icon v-if="item[menuOptions.icon]">
      <Component :is="ElementPlusIconsVue[item[menuOptions.icon]]" />
    </el-icon> -->
    <el-image :src="Common.getImage(item[menuOptions.icon])" style="width: 25px" fit="contain" />
    <span>{{ item[menuOptions.title] }}</span>
  </el-menu-item>

  <!-- 有子节点，使用 el-sub-menu 渲染 -->
  <el-sub-menu v-else :index="item[menuOptions.code]">
    <template #title>
      <!-- <el-icon v-if="item[menuOptions.icon]">
        <Component :is="ElementPlusIconsVue[item[menuOptions.icon]]" />
      </el-icon> -->
      <el-image :src="Common.getImage(item[menuOptions.icon])" style="width: 25px" fit="contain" />
      <span>{{ item[menuOptions.title] }}</span>
    </template>
    <!-- 循环渲染 -->
    <windows-menutree-item v-for="sub in item[menuOptions.children]" :key="sub[menuOptions.code]" :item="sub" :menu-options="menuOptions" @app-click="handleAppClick" />
  </el-sub-menu>
</template>

<style scoped lang="scss">
.el-image {
  display: flex;
  margin-right: 8px;
}
</style>
